<template>
  <div class="container-echart">
    <div :id="'echart' + timeId" class="interface-echart"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";

import {
  onMounted,
  ref,
  reactive,
  markRaw,
  watch,
  onBeforeUnmount,
  nextTick,
} from "vue";
const emit = defineEmits(["bian"]);
const props = defineProps({
  chdata: {
    // 柱形图x轴数据
    type: Array,
    default: function () {
      return ["1", "2", "3", "4", "5", "5", "5"];
    },
  },
  dai: {
    //图标信息提示
    type: Array,
    default: function () {
      return [];
    },
  },
  radio1: {
    type: String,
    default: "",
  },
  zhedata: {
    //图标信息提示
    type: Array,
    default: function () {
      return [];
    },
  },
  yDataArray: {
    //图标信息提示
    type: Array,
    default: function () {
      return [];
    },
  },
  xuanzhong: {
    //图标信息提示
    type: Array,
    default: function () {
      return [];
    },
  },
  cont: {
    type: String,
  },
});

const colol = ref(["red", "#000", "red", "red", "red"]);
let myEchart;
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
  const option = {
    title: {
      text: tit.value,
    },
    // color: colol,
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: zdata.data,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ri.value,
    },
    yAxis: {
      type: "value",
    },
    series: sec.value,
    // [
    //   {
    //     itemStyle: {opacity: 0},
    //     name: "Email",
    //     type: "line",
    //     stack: "Total",
    //     data: [120, 132, 101, 134, 90, 230, 210],
    //   },
    //   {
    //     itemStyle: {opacity: 0},
    //     name: "Union Ads",
    //     type: "line",
    //     stack: "Total",
    //     data: [220, 182, 191, 234, 290, 330, 310],
    //   },
    //   {
    //     itemStyle: {opacity: 0},
    //     name: "Video Ads",
    //     type: "line",
    //     stack: "Total",
    //     data: [150, 232, 201, 154, 190, 330, 410],
    //   },

    //   {
    //     itemStyle: {opacity: 0},

    //     name: "Direct",
    //     type: "line",
    //     stack: "Total",
    //     data: [320, 332, 301, 334, 390, 330, 320],
    //   },
    //   {
    //     name: "Search Engine",
    //     type: "line",
    //     itemStyle: {opacity: 0},
    //     stack: "Total",
    //     data: [820, 932, 901, 934, 1290, 1330, 1320],
    //   },
    //   {
    //     name: "dd",
    //     type: "line",
    //     itemStyle: {opacity: 0},
    //     stack: "Total",
    //     data: [820, 932, 901, 934, 1290, 1330, 1320],
    //   },
    // ],
  };
  myEchart.setOption(option, {notMerge: true});
};

const zdata = reactive({
  data: [],
  xdata: [],
});

watch(
  //监控数据变化
  () => props.xuanzhong,
  (r) => {
    console.log(r);
    zdata.data = r.map((item) => item.label);
    if (props.xuanzhong.length) {
      let a = props.dai.filter((item) =>
        props.xuanzhong.some((selectedItem) => selectedItem.key === item.key)
      );

      emit("bian", a);
    }
    setTimeout(() => {
      myEchartData();
    }, 500);
  },
  {deep: true}
);

const sec = ref([]);
const ri = ref([]);
const tit = ref("");
watch(
  //监控数据变化
  () => props.zhedata,
  (r) => {
    if (props.radio1 == "metric_gmv") {
      tit.value = "订购金额";
    }
    if (props.radio1 == "metric_items") {
      tit.value = "订购件数";
    }
    if (props.radio1 == "metric_aiv") {
      tit.value = "订购价格";
    }
    if (props.radio1 == "metric_sellers") {
      tit.value = "卖家数量";
    }
    if (props.radio1 == "metric_brands") {
      tit.value = "品牌数量";
    }

    ri.value = [];
    sec.value = [];
    ri.value = r[0].items.map((e) => e.date);
    if (zdata.data.length) {
      r.forEach((item) => {
        props.xuanzhong.forEach((items) => {
          if (item.key == items.key) {
            let a = {
              name: items.label,
              type: "line",
              itemStyle: {opacity: 0},
              stack: items.key,
              data: [],
            };

            item.items.forEach((e) => {
              a.data.push(Number(e.value).toFixed(0));
            });

            sec.value.push(a);
          }
        });
      });
    }
    setTimeout(() => {
      myEchartData();
    }, 500);
  },
  {deep: true}
);
onMounted(() => {
  setTimeout(() => {
    const dom = document.getElementById(`echart${timeId.value}`);
    myEchart = markRaw(echarts.init(dom));
    myEchartData();
  }, 500);

  // 当窗口发生变化时
  window.addEventListener("resize", () => {
    myEchart.resize();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    myEchart.resize();
  });
});
</script>
<style scoped lang="scss">
.container-echart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.interface-echart {
  width: 100%;
  height: 350px;
}
</style>
